<template>
    <div id="addTrends">
        <head-tip @tomove="toSomeUrl" title='添加动态' :isTre=true>
            <div class="head-right">
                <span @click="sendTrend()" class="link icon-only" style="font-size: 18px; margin-right: 10px;color: #333;">提交</span>
            </div>
        </head-tip>
        <section class="trend-card">
            <el-input type="textarea" v-model="content"  placeholder="请输入内容..." size='medium'></el-input>
            <div class="clearfix" id="artice-imgs">
                <img  v-for="(item,key) in imgfileurl" :key="key" @click="delimg(key)" :src="item" alt="" style="height: 60px;width: 60px;margin: 10px 5px;" />
            </div>
            <div style="position:relative;float:left">
                <input  @change="chooseImg" type="file" multiple="" class="btn-add-input"  accpet="image/*"> 
                <div class="btn-add" >+</div>
            </div>
            <span style="font-size:0.7rem; color:#666; padding-left:0.5rem;line-height:60px"> 选择图片 最多5张....</span>
            <!--<my-check
              align="right"
              title="选择你要发布的名帖"
              v-model="checkCards"
              :options="mycards">
            </my-check>-->
            <div id="">
            	<label @click="beforeCh" class="mint-checklist-title" style="margin-top: 20px;text-align: center;">选择你要发布的名帖（已选{{this.$store.state.publicCard.length}}）</label>
            </div>
        </section>
    </div>
</template>

<script>

import headTip from '@/components/common/head'
import myCheck from '@/components/common/checklist'
export default {
    data(){
        return {
            issending:false,
            content:'',
            imgfile:[],
            imgfileurl:[],
            checkCards:this.$store.state.publicCard,
            mycards : [],
        }
    },
    methods:{
        beforeCh(){
            this.$router.push({path:"/mine/commonCard",query:{type:"trend"}})
        },
        updateContent(){
            updateContent
        },
        chooseImg(e){
            var files = e.target.files
            var filesurl=[]
            var _this=this
            if(files.length+this.imgfile.length>5){
                alert('最多上传5张照片')
                return false;
            }
            for (var value of files){
                if(typeof value=='object'){
                    this.imgfile.push(value)
                }
            }
             this.imgfile.forEach(function(v,k){
                 var src = window.URL.createObjectURL(v);
                 filesurl.push(src)
            })
            _this.imgfileurl=filesurl
        },
        delimg(key){
            this.imgfileurl.splice(key,1)
            this.imgfile.splice(key,1)
        },
        getData(curData){
            var _this=this
            curData.forEach(function(v,k){
                var thisimg=v.cplogo ? _this.catchurl(v.cplogo) : ''
                var json={
                    "label":v.cname,
                    "value":v.id,
                    "img":thisimg
                }
                _this.mycards.push(json)
            })
            // console.log(this.mycards)
        },
        sendTrend(){
            if(!this.issending){
                this.issending = true;
                var qs = require('qs');
                var self = this;
                
                var  formData=new FormData();
                if(this.checkCards.length<=0){
                    self.$message({
                                duration: 2000,
                                message: '请选择您要发布的名帖',
                                type: 'success'
                            })
                    this.issending = false;
                    return false
                }
                formData.append('ccontent',this.content);
                formData.append('itype',1)
                formData.append('ccardid',this.checkCards.join(','))
                this.imgfile.forEach(function(v){
                    if(v){
                        formData.append('files',v)
                    }
                })
                // Indicator.open({
                //     text: '提交中...',
                //     spinnerType: 'fading-circle'
                // });
                this.$axios.post(this.httpurl('article/saveArticle'),formData)
                .then(response=>{
                    var data=response.data
                    var userInfo = JSON.parse(sessionStorage.userinfos)
                    if(data.result==1){
                        self.$message({
                                    duration: 2000,
                                    message: '发布成功',
                                    type: 'success'
                                })
                        if(userInfo == null){
                            userInfo = {}
                            userInfo.ifoccount=0
                            userInfo.iartcount=0
                            userInfo.ibfoccount=0
                        }else if(!userInfo.iartcount){
                            userInfo.iartcount=0
                        }
                        userInfo.iartcount++
                        sessionStorage.setItem('userinfos',JSON.stringify(userInfo))
                        setTimeout(function(){
                            self.$router.push({path:"/trends?type=2"})
                            self.issending = false;
                        },1000)
                    }else{
                        self.$message({
                                    duration: 2000,
                                    message: '发布失败',
                                    type: 'error'
                                })
                    }
                    // Indicator.close();
                })
            }
        },
        toSomeUrl(){
            this.$router.push({path:"/trends?type=2"})
        }
    },  
    components:{
        headTip,
        myCheck
    },
    created(){

    },
    mounted(){
        this.$axios.get(this.httpurl('card/findCardByUid'))
        .then(response=>{
            var data=response.data
            if(data.result==1){
                var CurData=data.data
                this.getData(CurData)
            }
        })
        .catch(error=> {
           console.log(error);
        });
    },
    activated () {
        this.checkCards = this.$store.state.publicCard
        if(this.$route.meta.isActive == true){
            this.content = ''
            this.imgfile = []
            this.imgfileurl = []
        }
        this.chooseArr = this.$store.state.publicCard
        // console.log(this.checkCards)
    },
    beforeRouteEnter(to,from,next){
        if(from.name != 'commonCard'){
            to.meta.isActive = true;
        }
        next();
    },
    beforeRouteLeave(to,from,next){
        from.meta.isActive = false;
        next();
    }
}
</script>

<style   scoped>
.trend-card{padding: 0 10px; box-sizing: border-box;margin-top: 50px;}
.btn-add{height: 50px; width: 50px; border: 0.01rem solid #ccc; display: inline-block; line-height: 46px; text-align: center; font-size:2rem; margin-top: 5px; margin-bottom: 15px; color:#666;}
.btn-add-input{opacity: 0;position:absolute;height:50px;width:50px;top:0;left:0}
.mint-checklist-title{
    line-height: 30px;
    height: 30px;
    font-size: 20px;
    background: #00AA76;
    margin: 0;
    padding: 8px 0;
    color: #fff;
}
</style>
<style>
	.el-textarea__inner{height: 150px;}
</style>
